<div class="layuimini-main">

  <div class="layui-form layui-form-pane">

    <div class="layui-form-item">
      <label class="layui-form-label required">商品名</label>
      <div class="layui-input-block">
        <input id="id" type="hidden" name="id">
        <input id="goodsName" type="text" name="goodsName" lay-verify="required" lay-reqtext="商品名不能为空"
               placeholder="请输入商品名" value="" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label required">商品价格</label>
      <div class="layui-input-inline">
        <input id="goodsPrice" type="text" name="goodsPrice" lay-verify="required" lay-reqtext="商品价格不能为空"
               placeholder="请输入商品价格" value="" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label required">商品库存</label>
      <div class="layui-input-inline">
        <input id="goodsStock" type="text" name="goodsStock" lay-verify="required" lay-reqtext="商品库存不能为空"
               placeholder="请输入商品库存" value="" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label required">商品标题</label>
      <div class="layui-input-block">
        <input id="goodsTitle" type="text" name="goodsTitle" lay-verify="required" lay-reqtext="商品标题不能为空"
               placeholder="请输入商品标题" value="" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">商品详情</label>
      <div class="layui-input-block">
        <textarea id="goodsDetail" name="goodsDetail" class="layui-textarea" placeholder="请输入商品的详细介绍信息"></textarea>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label required">商品图片</label>
      <div class="layui-input-block">
        <input id="pic" type="text" readonly name="pic" value="" class="layui-input">
        <input id="goodsImg" type="hidden" name="goodsImg" value="" class="layui-input">
      </div>
    </div>

    <style type="text/css">
        #upBox {
            text-align: center;
            width: 500px;
            padding: 20px;
            border: 1px solid #666;
            position: relative;
            margin-bottom: 15px;
            border-radius: 10px;
        }

        #inputBox {
            width: 100%;
            height: 40px;
            border: 1px solid cornflowerblue;
            color: cornflowerblue;
            border-radius: 20px;
            position: relative;
            text-align: center;
            line-height: 40px;
            overflow: hidden;
            font-size: 16px;
        }

        #inputBox input {
            width: 114%;
            height: 40px;
            opacity: 0;
            cursor: pointer;
            position: absolute;
            top: 0;
            left: -14%;

        }

        #imgBox {
            text-align: left;
        }

        .imgContainer {
            display: inline-block;
            width: 32%;
            height: 150px;
            margin-left: 1%;
            border: 1px solid #666666;
            position: relative;
            margin-top: 30px;
            box-sizing: border-box;
        }

        .imgContainer img {
            width: 100%;
            height: 150px;
            cursor: pointer;
        }

        .imgContainer p {
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 30px;
            background: black;
            text-align: center;
            line-height: 30px;
            color: white;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            display: none;
        }

        .imgContainer:hover p {
            display: block;
        }

        #btn {
            display: inline-block;
            text-align: center;
            line-height: 30px;
            outline: none;
            width: 100px;
            height: 30px;
            background: cornflowerblue;
            border: 1px solid cornflowerblue;
            color: white;
            cursor: pointer;
            margin-top: 30px;
            border-radius: 5px;
        }
    </style>
    <script src="/js/jquery.min.js"></script>
    <form id="upBox">
      <div id="inputBox">
        <input id="file" class="layui-input" type="file" title="请选择图片" multiple name="file"
               accept="image/png,image/jpg,image/gif,image/JPEG"/>点击上传商品图片
      </div>
      <div id="imgBox"></div>
      <a id="btn">上传</a>
    </form>

    <script src="/js/uploadImg.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        imgUpload({
            inputId: 'file', //input框id
            imgBox: 'imgBox', //图片容器id
            buttonId: 'btn', //提交按钮id
            upUrl: 'common/upload',  //提交地址
            data: 'file', //参数名
            num: "1"//上传个数
        })
    </script>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
      </div>
    </div>
  </div>
</div>

<script src="/js/common.js"></script>
<script>
    function child(obj) {
        $('#goodsName').val(obj.goodsName);
        $('#goodsPrice').val(obj.goodsPrice);
        $('#goodsStock').val(obj.goodsStock);
        $('#goodsTitle').val(obj.goodsTitle);
        $('#goodsDetail').val(obj.goodsDetail);
        $('#goodsImg').val(obj.goodsImg);
        $('#pic').val(obj.goodsPic);
        $('#id').val(obj.id);
    }

    layui.use(['form', 'table'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            $ = layui.$;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var str = "商品名：" + data.field.goodsName +
                '<br>商品价格：' + data.field.goodsPrice +
                '<br>商品库存：' + data.field.goodsStock +
                '<br>商品标题：' + data.field.goodsTitle +
                '<br>商品详情：' + data.field.goodsDetail +
                '<br>商品图片：' + data.field.pic
            var index = layer.alert(str, {title: '最终的提交信息'}, function () {
                // console.log(JSON.stringify(data.field))
                var json = JSON.stringify(data.field)

                $.ajax({
                    url: "/goods/modifiedGoods",
                    type: "PUT",
                    contentType: 'application/json',
                    data: json,
                    success: function (data) {
                        if (data.code == 200) {
                            layer.msg(data.message)
                        } else {
                            layer.msg(data.message)
                        }
                    },
                    error: function () {
                        layer.msg(data.message)
                    }
                })

                setTimeout(function fun() {
                }, 2000)

                parent.getSonValue(data.field)
                // 关闭弹出层
                layer.close(index);
                layer.close(parentIndex);

            });

        });

    });
</script>